import Vue from 'vue'
// import router from '@/router'
// router.push()
import Message from './main.vue'

const MessageConstructor = Vue.extend(Message)

// Vue.extend + vm.$mount，可以让我们在vue中用js一样的方法去直接调用一个组件
// https://www.cnblogs.com/hentai-miao/p/10271652.html
const MsgMain = {
    show (type, options) {
        if (type == 'confirm') {
            options.showConfirm = true
            options.showCancel = true
        }
        // 实例化组件
        const instance = new MessageConstructor()
        // 将组件实例挂在到一个元素上面，如果不传参数就是挂载到body，或者也可以传入其他已经存在的元素的选择器
        instance.$mount(document.createElement('div'))
        // 通过组件实例的$el属性，可以访问到这个组件元素，然后把它拼接到body上。
        document.body.appendChild(instance.$el)
        // 给实例传入参数
        instance.type = type
        for (let i in options) {
            instance[i] = options[i]
            console.log(i)
        }
        instance.dialogVisible = true
        // 自动关闭弹窗
        if (options.autoClose) {
            let duration = options.duration || 3
            instance.countDownNum = duration
            instance.countDown()
        }
    },
    // 成功
    success (options) {
        this.show('success', options)
    },
    // 失败
    error (options) {
        this.show('error', options)
    },
    // 警告
    warning (options) {
        this.show('warning', options)
    },
    // 信息
    info (options) {
        this.show('info', options)
    },
    // 确认
    confirm (options) {
        this.show('confirm', options)
    }
}

// 全局注册
function Msg () {
    Vue.prototype.$Msg = MsgMain
    // 最终调用就是this.$msg.success() 或者this.$msg.error()
}

export default Msg

// return;
// const instance = new MessageConstructor({
// el: document.createElement('div')
// })
// instance.dialogVisible=false;
// let mainVm=new MessageConstructor();

// document.body.appendChild(el); // 把生成的提示的dom插入body中

/*
 * type:success、warning、error、info
 * title:主标题
 * content:内容
 * showConfirm:确认按钮
 * showCancel：取消按钮
 * */
// const Message={
//	"success":function({title,content,showConfirm,autoClose,autoCloseTxt,closeToUrl}){
//		console.log("$Msg.success")
//		Vue.nextTick(() => {
//      instance.dialogVisible = true;
//   });
//		instance.$nextTick(()=>{
//
//			instance.showMsg({
//				type:"success",
//				title:title||"成功",
//				content,
//				showConfirm:showConfirm||false,
//				autoClose,
//				autoCloseTxt,
//				closeToUrl
//			})
//		})
//	},
//	"warning":function(){
//		console.log("warning")
//	},
//	"error":function(){
//		console.log("error")
//	},
//	"info":function(){
//		console.log("info")
//	},
//	"confirm":function(){
//		console.log("confirm")
//	},
//	"close":function(){
//		console.log("close")
//	}
// }
//
// export default {
//	install(Vue){
//		Vue.prototype.$Msg = Message
//	}
// };
